

<!DOCTYPE html>
<html lang class="loading">
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Highcharts之实时柱状图 - 闲看花开 静待花落</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate">
    <meta name="keywords" content="贰货不二,"> 
    <meta name="description" content="1、导入highcharts.js和jQuery.js2、Html代码和js代码123//container2为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用&amp;lt;div id=&amp;,"> 
    <meta name="author" content="贰货不二"> 
    <link rel="alternative" href="atom.xml" title="闲看花开 静待花落" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <link rel="stylesheet" href="/css/diaspora.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
    
</head>
</html>
<body class="loading">
    <span id="config-title" style="display:none">闲看花开 静待花落</span>
    <div id="loader"></div>
    <div id="single">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="icon-home image-icon" href="javascript:;" data-url="https://mrdcg.github.io"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">Highcharts之实时柱状图</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">Highcharts之实时柱状图</h1>
        <div class="stuff">
            <span>七月 07, 2019</span>

            <span>
   阅读数(请刷新)<span id="busuanzi_value_page_pv"></span>
</span>
            
  <ul class="post-tags-list"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/插件/">插件</a></li></ul>



        </div>
        <div class="content markdown">
            <h2 id="1、导入highcharts-js和jQuery-js"><a href="#1、导入highcharts-js和jQuery-js" class="headerlink" title="1、导入highcharts.js和jQuery.js"></a><a href></a>1、导入highcharts.js和jQuery.js</h2><h2 id="2、Html代码和js代码"><a href="#2、Html代码和js代码" class="headerlink" title="2、Html代码和js代码"></a><a href></a>2、Html代码和js代码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//container2为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用</span><br><span class="line">&lt;div id=&quot;container2&quot; style=&quot;width:380px;height:230px;margin:0 auto;padding-top: 10px&quot;&gt; </span><br><span class="line"> &lt;/div&gt;</span><br></pre></td></tr></table></figure>


<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">$(function()&#123;</span><br><span class="line">	Highcharts.setOptions(&#123;</span><br><span class="line">	//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置</span><br><span class="line">		global:&#123;</span><br><span class="line">			useUTC:false     //默认true</span><br><span class="line">	/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">var chars;</span><br><span class="line">$(document).ready(function()&#123;</span><br><span class="line">//调用柱状图函数</span><br><span class="line">	column()</span><br><span class="line">&#125;);</span><br><span class="line">&#125;);</span><br><span class="line">function column()&#123;</span><br><span class="line">	var options = &#123;</span><br><span class="line">//			图表定义</span><br><span class="line">			</span><br><span class="line">			chart:&#123;</span><br><span class="line">				backgroundColor:&apos;transparent&apos;,				//背景色</span><br><span class="line">				</span><br><span class="line">				renderTo: &apos;container2&apos;,//图表渲染容器的 HTML 元素的 id 或对象引用</span><br><span class="line">				type:&apos;column&apos;,				//柱状图，修改column可改为饼图等其他图表</span><br><span class="line">				marginRight:10,</span><br><span class="line"></span><br><span class="line">			&#125;,</span><br><span class="line">			title:&#123;      </span><br><span class="line">			//标题名称    </span><br><span class="line">              text: &apos;&apos;,</span><br><span class="line">               //标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px</span><br><span class="line">              x:-20</span><br><span class="line">          &#125;,</span><br><span class="line">           /*x轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调*/</span><br><span class="line">          xAxis:&#123;</span><br><span class="line">        	  labels: &#123;</span><br><span class="line">      			rotation: -45  // 设置轴标签旋转角度</span><br><span class="line">      		&#125;,</span><br><span class="line">      		//x轴为0~24小时</span><br><span class="line">        	  categories: [</span><br><span class="line">        		  &apos;00~02&apos;, &apos;02~04&apos;, &apos;04~06&apos;, &apos;06~08&apos;,</span><br><span class="line">                  &apos;08~10&apos;, &apos;10~12&apos;, &apos;12~14&apos;, &apos;14~16&apos;, </span><br><span class="line">                  &apos;16~18&apos;, &apos;18~20&apos;, &apos;20~22&apos;, &apos;22~24&apos;</span><br><span class="line">      		],</span><br><span class="line">      		crosshair: true</span><br><span class="line"></span><br><span class="line">          &#125;,</span><br><span class="line">        //y轴，y轴的数据值最小为0</span><br><span class="line">          yAxis: &#123;</span><br><span class="line">        	  startOnTick:true,  //为true时，设置min生效</span><br><span class="line">        	  min:0,</span><br><span class="line">              </span><br><span class="line">              title: &#123;</span><br><span class="line">                  text: &apos;超出人数&apos;,</span><br><span class="line">                  </span><br><span class="line">              &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">                  </span><br><span class="line">          </span><br><span class="line">          //数据提示框，显示每个点的含义（对应的x轴和y轴数据）</span><br><span class="line">          tooltip: &#123;</span><br><span class="line">        	  headerFormat: &apos;&lt;span style=&quot;font-size:10px&quot;&gt;&#123;point.key&#125;&lt;/span&gt;&lt;table&gt;&lt;br&gt;&apos;,</span><br><span class="line">        	  pointFormat: &apos;&lt;tr&gt;&lt;td style=&quot;color:&#123;series.color&#125;;padding:0&quot;&gt;&#123;series.name&#125;: &lt;/td&gt;&apos; +</span><br><span class="line">      		&apos;&lt;td style=&quot;padding:0&quot;&gt;&lt;b&gt;&#123;point.y&#125; 人&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&apos;,</span><br><span class="line">          &#125;, </span><br><span class="line">            //图例，图例说明是包含图表中数列标志和名称的容器</span><br><span class="line">          legend:&#123;</span><br><span class="line">        	  enabled:false</span><br><span class="line">          &#125;,</span><br><span class="line">          //版权信息</span><br><span class="line">          credits:&#123;</span><br><span class="line">        	  enabled:false</span><br><span class="line">          &#125;,</span><br><span class="line">        //数据列</span><br><span class="line">        series:[&#123;</span><br><span class="line">        	colorByPoint: true,</span><br><span class="line">        	name:&apos;总超出人数&apos;,</span><br><span class="line">        	</span><br><span class="line">        &#125;]</span><br><span class="line">	&#125;;</span><br><span class="line">	//ajax请求，获取后台数据</span><br><span class="line">	$.ajax(&#123;</span><br><span class="line">		url:&apos;/Software-cup001/record_dataServlet&apos;,			//获取数据的页面地址</span><br><span class="line">	</span><br><span class="line">		//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。</span><br><span class="line">		cache:false,</span><br><span class="line">		dataType:&quot;json&quot;,</span><br><span class="line">		data:&#123;&#125;,</span><br><span class="line">		//仅在服务器数据改变时获取新数据。默认值: false</span><br><span class="line">		ifModified:false,</span><br><span class="line">		success: function(result)&#123;</span><br><span class="line">			</span><br><span class="line">			var data = [];</span><br><span class="line">	//用于统计</span><br><span class="line">			var suma1=0;   var suma6=0;   var suma12=0;     var sumb6=0;   var sumb12=0;</span><br><span class="line">			var suma2=0;   var suma7=0;   var sumb1=0;   	var sumb7=0;</span><br><span class="line">			var suma3=0;   var suma8=0;   var sumb2=0;   	var sumb8=0;</span><br><span class="line">			var suma4=0;   var suma9=0;   var sumb3=0;   	var sumb9=0;</span><br><span class="line">			var suma5=0;   var suma10=0;  var sumb4=0;   	var sumb10=0;</span><br><span class="line">			var sum=0;	   var suma11=0;  var sumb5=0;   	var sumb11=0;</span><br><span class="line">			var sumc1=0;   var sumc4=0;   var sumc7=0;   	var sumc10=0;</span><br><span class="line">			var sumc2=0;   var sumc5=0;   var sumc8=0;   	var sumc11=0;</span><br><span class="line">			var sumc3=0;   var sumc6=0;   var sumc9=0;   	var sumc12=0;</span><br><span class="line">			var sumd1=0;   var sumd4=0;   var sumd7=0;   	var sumd10=0;</span><br><span class="line">			var sumd2=0;   var sumd5=0;   var sumd8=0;   	var sumd11=0;</span><br><span class="line">			var sumd3=0;   var sumd6=0;   var sumd9=0;   	var sumd12=0;</span><br><span class="line">			var sume1=0;   var sume4=0;   var sume7=0;   	var sume10=0;</span><br><span class="line">			var sume2=0;   var sume5=0;   var sume8=0;   	var sume11=0;</span><br><span class="line">			var sume3=0;   var sume6=0;   var sume9=0;   	var sume12=0;</span><br><span class="line">			</span><br><span class="line">			//jQuery.each() 函数用于遍历指定的对象和数组</span><br><span class="line">			jQuery.each(result, function(m,obj)&#123;</span><br><span class="line">				if(parseInt(obj.startTime)&gt;=0&amp;&amp;parseInt(obj.startTime)&lt;2)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma1&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma1=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb1&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb1=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc1&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc1=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd1&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd1=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume1&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume1=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=2&amp;&amp;parseInt(obj.startTime)&lt;4)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma2&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma2=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb2&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb2=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc2&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc2=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd2&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd2=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume2&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume2=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=4&amp;&amp;parseInt(obj.startTime)&lt;6)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma3&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma3=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb3&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb3=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc3&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc3=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd3&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd3=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume3&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume3=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=6&amp;&amp;parseInt(obj.startTime)&lt;8)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma4&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma4=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb4&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb4=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc4&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc4=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd4&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd4=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume4&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume4=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=8&amp;&amp;parseInt(obj.startTime)&lt;10)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma5&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma5=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb5&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb5=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc5&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc5=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd5&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd5=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume5&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume5=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=10&amp;&amp;parseInt(obj.startTime)&lt;12)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma6&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma6=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb6&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb6=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc6&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc6=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd6&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd6=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume6&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume6=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=12&amp;&amp;parseInt(obj.startTime)&lt;14)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma7&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma7=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb7&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb7=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc7&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc7=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd7&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd7=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume7&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume7=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=14&amp;&amp;parseInt(obj.startTime)&lt;16)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma8&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma8=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb8&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb8=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc8&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc8=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd8&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd8=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume8&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume8=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=16&amp;&amp;parseInt(obj.startTime)&lt;18)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma9&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma9=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb9&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb9=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc9&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc9=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd9&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd9=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume9&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume9=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=18&amp;&amp;parseInt(obj.startTime)&lt;20)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma10&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma10=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb10&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb10=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc10&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc10=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd10&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd10=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume10&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume10=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=20&amp;&amp;parseInt(obj.startTime)&lt;22)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma11&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma11=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb11&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb11=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc11&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc11=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd11&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd11=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume11&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume11=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				else if(parseInt(obj.startTime)&gt;=22&amp;&amp;parseInt(obj.startTime)&lt;24)&#123;</span><br><span class="line">					</span><br><span class="line">					if(suma12&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;校园大门&quot;)&#123;</span><br><span class="line">						suma12=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumb12&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;学校食堂&quot;)&#123;</span><br><span class="line">						sumb12=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumc12&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;大型商超&quot;)&#123;</span><br><span class="line">						sumc12=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sumd12&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;政府大门&quot;)&#123;</span><br><span class="line">						sumd12=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">					else if(sume12&lt;obj.avgHeadNum&amp;&amp;obj.site==&quot;交通枢纽&quot;)&#123;</span><br><span class="line">						sume12=obj.avgHeadNum;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				</span><br><span class="line">				</span><br><span class="line">			</span><br><span class="line">			&#125;);</span><br><span class="line">			//加入数据</span><br><span class="line">				data.push(</span><br><span class="line">					&#123;name:&quot;00:00~02:00&quot;,y:suma1+sumb1+sumc1+sumd1+sume1&#125;,</span><br><span class="line">					&#123;name:&quot;02:00~04:00&quot;,y:suma2+sumb2+sumc2+sumd2+sume2&#125;,</span><br><span class="line">					&#123;name:&quot;04:00~06:00&quot;,y:suma3+sumb3+sumc3+sumd3+sume3&#125;,</span><br><span class="line">					&#123;name:&quot;06:00~08:00&quot;,y:suma4+sumb4+sumc4+sumd4+sume4&#125;,</span><br><span class="line">					&#123;name:&quot;08:00~10:00&quot;,y:suma5+sumb5+sumc5+sumd5+sume5&#125;,</span><br><span class="line">					&#123;name:&quot;10:00~12:00&quot;,y:suma6+sumb6+sumc6+sumd6+sume6&#125;,					</span><br><span class="line">					&#123;name:&quot;12:00~14:00&quot;,y:suma7+sumb7+sumc7+sumd7+sume7&#125;,</span><br><span class="line">					&#123;name:&quot;14:00~16:00&quot;,y:suma8+sumb8+sumc8+sumd8+sume8&#125;,</span><br><span class="line">					&#123;name:&quot;16:00~18:00&quot;,y:suma9+sumb9+sumc9+sumd9+sume9&#125;,</span><br><span class="line">					&#123;name:&quot;18:00~20:00&quot;,y:suma10+sumb10+sumc10+sumd10+sume10&#125;,</span><br><span class="line">					&#123;name:&quot;20:00~22:00&quot;,y:suma11+sumb11+sumc11+sumd11+sume11&#125;,</span><br><span class="line">					&#123;name:&quot;22:00~24:00&quot;,y:suma12+sumb12+sumc12+sumd12+sume12&#125;</span><br><span class="line">				);</span><br><span class="line"></span><br><span class="line">			options.series[0].data = data;</span><br><span class="line">			chart = new Highcharts.Chart(options);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">	//定时器，每分钟访问一次column()函数</span><br><span class="line">	setTimeout(&quot;column()&quot;,60000);</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p> <img src="https://img-blog.csdnimg.cn/20190704102417148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VyaHVvYnVlcg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="3、Highcharts"><a href="#3、Highcharts" class="headerlink" title="3、Highcharts"></a><a href></a>3、Highcharts</h2><p> <a href="https://api.highcharts.com.cn/" target="_blank" rel="noopener">Highcharts API文档</a></p>
<p> <a href="https://www.highcharts.com.cn/download" target="_blank" rel="noopener">Highcharts.js下载地址</a></p>
<p> Highcharts提供CDN 服务，在下载界面可见详细描述<br> <a href="https://jquery.com/" target="_blank" rel="noopener">jQuery下载</a></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="http://link.hhtjim.com/163/92939.mp3">
            </audio>
            
        </div>
        
        
    <div id='gitalk-container' class="comment link"
        data-ae='false'
        data-ci='e79d3ae9c45da13e6f66'
        data-cs='896cb16e937a9e56f91295c1bab9e5aad59746ad'
        data-r='MrDCG.github.io'
        data-o='MrDCG'
        data-a='MrDCG'
        data-d='true'
    >查看评论</div>


        
    </div>

    
    
</div>

    </div>
</div>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/koharu.model.json"},"display":{"position":"right","width":145,"height":315},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">
<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>




</html>
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>